<template>
  <el-dialog :title="title" v-model="show" width="1500px" append-to-body>
<!--    <el-divider content-position="left">基础信息</el-divider>-->
<!--    <el-row :gutter="12">-->
<!--      <el-col :span="12">-->
<!--        <el-card class="box-card">-->
<!--          <el-descriptions title="胜率" :column="3">-->
<!--            <el-descriptions-item label="主胜">{{baseInfo.mainWinOdds}}</el-descriptions-item>-->
<!--            <el-descriptions-item label="平胜">{{baseInfo.levelOdds}}</el-descriptions-item>-->
<!--            <el-descriptions-item label="客胜">{{baseInfo.gustWinOdds}}</el-descriptions-item>-->
<!--          </el-descriptions>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <el-card class="box-card">-->
<!--          <el-descriptions title="让球胜率" :column="3">-->
<!--            <el-descriptions-item label="让主胜">{{baseInfo.rqMainWinOdds}}</el-descriptions-item>-->
<!--            <el-descriptions-item label="让平胜">{{baseInfo.rqLevelOdds}}</el-descriptions-item>-->
<!--            <el-descriptions-item label="让客胜">{{baseInfo.rqGustWinOdds}}</el-descriptions-item>-->
<!--          </el-descriptions>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row >-->
    <el-divider content-position="left">比分信息</el-divider>
    <el-row>
      <el-col>
        <el-button :type="mainButton ? 'primary' : ''" @click="mainButton = !mainButton">主</el-button>
        <el-button :type="levelButton ? 'success' : ''" @click="levelButton = !levelButton">平</el-button>
        <el-button :type="gustButton ? 'info' : '' " @click="gustButton = !gustButton">客</el-button>
      </el-col>
    </el-row>
    <el-row >
      <el-col>
        <el-card class="box-card">
          <table>
            <thead>
            <tr>
              <th v-for="head in currentMatchRangeList" style="width: 100px;">
                {{head.type}}
              </th>
            </tr>
            </thead>
            <tbody>
            <tr >
              <td v-for="body in  currentMatchRangeList" >
                <el-row v-for="bd in body.csList"  type="flex" justify="center">
                  <el-button class="mt5" tag="div" role="button" size="small"
                             :type="(bd.jqNum === currentJqNum) ? 'primary' : '' "
                             >
                    {{bd.label}}<br/>{{bd.price}}
                  </el-button>
                </el-row>

              </td>

            </tr>
            </tbody>
          </table>
        </el-card>
      </el-col>
    </el-row>
    <el-divider content-position="left">历史比分信息</el-divider>
    <el-tabs :tab-position="tabPosition" style="height: 600px;" class="demo-tabs" @tab-change="tabChange">
      <el-tab-pane :label="index" v-for="(item,index) in historyMatchRangeList">
        <template #default="scope">
          <div class="" style="height: 600px;overflow-y: scroll">
            <el-row  v-for="item2 in item">
            <el-col>
              <el-card class="box-card">
                <table>
                  <thead>
                  <tr>
                    <th v-for="head in item2" style="width: 100px;">
                      {{head.type}}
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr >
                    <td v-for="body in  item2">
                      <el-row v-for="bd in body.csList"  type="flex" justify="center">
                        <el-button class="mt5" tag="div" role="button" size="small"
                                   :type="(bd.jqNum === currentJqNum) ? 'primary' : '' "
                                   >
                          {{bd.label}}<br/>{{bd.price}}
                        </el-button>
                      </el-row>
                    </td>

                  </tr>
                  </tbody>
                </table>
              </el-card>
            </el-col>
          </el-row>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
    <el-row :gutter="12">
    </el-row >
  </el-dialog>
</template>



<script setup>
import {getHistoryMatchV2} from "@/api/match/historyMatch";
import {ref} from "vue";

const title = ref("查看")
const show = ref(false)
const matchId = ref("")
const loading = ref(true);

const currentJqNum = ref()

const tabPosition = ref('top')

const mainButton = ref(true)
const levelButton = ref(true)
const gustButton = ref(true)

const baseInfo = ref({})
const currentMatchRangeList = ref([])
const historyMatchRangeList = ref([])
const open = (id) => {
  show.value = true;
  matchId.value = id;
  loading.value = true
  getHistoryMatchV2(id).then(response => {
    loading.value = false;
    baseInfo.value = response.data.baseInfo;
    currentMatchRangeList.value = response.data.currentMatchRangeList;
    historyMatchRangeList.value = response.data.historyMatchRangeList;
    currentJqNum.value = 0
  });
}

function tabChange(c) {
  console.log("ccccccccccccccccccccc",c)
  currentJqNum.value = parseInt(c)
}

defineExpose({
  open
})
</script>


<style scoped lang="scss">
.box-card table{
  width: 100%;
  font-size: 8px;
  text-align: center;
  border-style: solid;
  border-color: red;
  border-width: 1px;
  tr{
    border:  1px solid red;
    th{
      border:  1px solid red;
      text-align: center;
    }
    td{
      text-align: center;
      border:  1px solid red;
    }
  }
}
.text-red{
  color: red;
  font-weight: 600;
}
.text-black{
  color: black;
  font-weight: 600;
}
.text-blue{
  color: blue;
  font-weight: 600;
}
.text-gold{
  color: gold;
  font-weight: 1000;
}
.text-midnightblue{
  color: midnightblue;
  font-weight: 1000;
}
.box-card{
  margin-top: 10px;
}
.rqBak {
  background-color: red;
}
.divider-top{
  border-top: 2px solid red;
}
</style>
